<!--css-->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/navbar.css" rel="stylesheet" />
<link href="css/profile.css" rel="stylesheet" />
<link href="css/eventprofile.css" rel="stylesheet" />
<!--end css-->

<!--nabvar-->

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="profile.html">MeteoCal</a><span></span>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <div class="col-sm-3 col-md-3">
        <form class="navbar-form" role="search"  action="search.html" method="GET">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="q">
            <div class="input-group-btn">
                <button class="btn btn-default" type="submit" ><i class="glyphicon glyphicon-search"></i></button>
            </div>
        </div>
        </form>
    </div>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="profile.html">User Name</a></li>
      <li><a href="index.html">Logout</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>


<!--end nabvar-->

<!-- here go the rest of the profile page -->
<div class="container">
    <div class="col-md-4">
	    <!-- Here goes the user info  -->
	    <div class="row" align="center">	    	
          <img class="profile-image img-circle" src="imgs/profile.png">
	    </div>
          
        <br>

	    <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title" align="center">User Name</h3>
            </div>
            <div class="panel-body">
		   <table class="table table-user-information" id="display">
                <tbody>
                  <tr>
                    <td>Email</td>
                    <td><a href="mailto:info@support.com">info@support.com</a></td>
                  </tr>

                  <tr>
                    <td>Password</td>
                    <td>********</td>
                  </tr>
                  <tr>
                    <td>Calendar</td>
                    <td>Public/Private
                    </td>                       
                  </tr>
                 
                </tbody>
              </table>

              <form>
			   	  <table class="table table-user-information form-group hidden" id="edit">
	                <tbody>
	                  <tr>
	                    <td>Email</td>
	                    <td><input type="text" class="form-control"  name="email" id="email" value="info@support.com"></td>
	                  </tr>

	                  <tr>
	                    <td>Old Password</td>
	                    <td><input type="password" class="form-control"  name="email" id="email" ></td>
	                  </tr>
	                  <tr>
	                    <td>New Password</td>
	                    <td><input type="password" class="form-control"  name="email" id="email" ></td>
	                  </tr>
	                  <tr>
	                    <td>Confirm Password</td>
	                    <td><input type="password" class="form-control"  name="email" id="email"></td>
	                  </tr>
	                  <tr>
	                    <td>Calendar</td>
	                    <td>
            <div class="btn-group" data-toggle="buttons" name="privacy">
              <label class="btn btn-default active">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> Private
              </label>
              <label class="btn btn-default">
                <input type="radio" name="options" id="option2" autocomplete="off"> Public
              </label>
            </div>
	                    </td>                       
	                  </tr>
	                 
	                </tbody>
	              </table>
	            </form>
	        </div>
		</div>
		<div align="right">			
			<span class="btn btn-info btn-lg" id="buttonEdit">Edit</span>
			<span class="btn btn-warning btn-lg hidden" id="buttonCancel">Cancel</span>
			<span class="btn btn-success btn-lg hidden" id="buttonSave">Save</span>
		</div>
	</div>
    <div class="col-md-8">
	    <!-- Here go the notifications and events -->
	    <!-- Notifications -->

	    <div id="noty-holder"></div>
	    <br>

	    <!-- events -->

			<div class="tabbable-panel">
				<div class="tabbable-line">
					<ul class="nav nav-tabs ">
						<li id="liNext" class="active" >
							<a id="buttonNext" href="#next events" data-toggle="tab">
							next events </a>
						</li>
						<li id="liMy">
							<a id="buttonMy" href="#myevents" data-toggle="tab">
							my events </a>
						</li>
						<li id="liGoing">
							<a id="buttonGoing" href="#eventsgoing" data-toggle="tab">
							events I'm going </a>
						</li>
						<span class="add-button"><a href="createevent.html">create event <span class="glyphicon glyphicon-plus"></span></a></span>
					</ul>
					<div class="tab-content">
						<div id="divNext" class="tab-pane active" id="tab_default_1">
							
							<div class="row">
								<div class="[ col-xs-12 col-sm-8 ]">
									<ul class="event-list">
										<li>
											<time datetime="2015-02-20">
												<span class="day">20</span>
												<span class="month">Feb</span>
												<span class="year">2015</span>
												<span class="time">20:50 AM</span>
											</time>
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<!--this is for the forecast/privacy-->
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<div class="info">
												<h2 class="title"><a href="event.html">Independence Day</a> </h2> 
												<p class="desc">United States Holiday slakjdlkajdlkasjdlkajd lkajd lka jlkd jalkdjalkdj alkd jalkd jsalkd jsalkda jsdlksa </p>
											</div>
										</li>
										<li>
											<time datetime="2015-02-20">
												<span class="day">20</span>
												<span class="month">Feb</span>
												<span class="year">2015</span>
												<span class="time">20:50 AM</span>
											</time>
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<!--this is for the forecast/privacy-->
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<div class="info">
												<h2 class="title"><a href="event.html">Independence Day</a> </h2> 
												<p class="desc">United States Holiday slakjdlkajdlkasjdlkajd lkajd lka jlkd jalkdjalkdj alkd jalkd jsalkd jsalkda jsdlksa </p>
											</div>
										</li>
									</ul>
								</div>
							</div>

						</div>
						<div id="divMy" class="tab-pane" id="tab_default_2">
							
							<div class="row">
								<div class="[ col-xs-12 col-sm-8 ]">
									<ul class="event-list">
										<li>
											<time datetime="2015-02-20">
												<span class="day">20</span>
												<span class="month">Feb</span>
												<span class="year">2015</span>
												<span class="time">20:50 AM</span>
											</time>
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<!--this is for the forecast/privacy-->
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<div class="info">
												<h2 class="title"><a href="event.html">Independence Day</a> </h2> 
												<p class="desc">United States Holiday slakjdlkajdlkasjdlkajd lkajd lka jlkd jalkdjalkdj alkd jalkd jsalkd jsalkda jsdlksa </p>
											</div>
										</li>
										<li>
											<time datetime="2015-02-20">
												<span class="day">20</span>
												<span class="month">Feb</span>
												<span class="year">2015</span>
												<span class="time">20:50 AM</span>
											</time>
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<!--this is for the forecast/privacy-->
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<div class="info">
												<h2 class="title"><a href="event.html">Indephgjhgjhgendence Day</a> </h2> 
												<p class="desc">United States Holiday slakjdlkajdlkasjdlkajd lkajd lka jlkd jalkdjalkdj alkd jalkd jsalkd jsalkda jsdlksa </p>
											</div>
										</li>
										<li>
											<time datetime="2015-02-20">
												<span class="day">20</span>
												<span class="month">Feb</span>
												<span class="year">2015</span>
												<span class="time">20:50 AM</span>
											</time>
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<!--this is for the forecast/privacy-->
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<div class="info">
												<h2 class="title"><a href="event.html">Independence Day</a> </h2> 
												<p class="desc">United States Holiday slakjdlkajdlkasjdlkajd lkajd lka jlkd jalkdjalkdj alkd jalkd jsalkd jsalkda jsdlksa </p>
											</div>
										</li>
									</ul>
								</div>
							</div>

						</div>
						<div id="divGoing" class="tab-pane" id="tab_default_3">
							
							<div class="row">
								<div class="[ col-xs-12 col-sm-8 ]">
									<ul class="event-list">
										<li>
											<time datetime="2015-02-20">
												<span class="day">20</span>
												<span class="month">Feb</span>
												<span class="year">2015</span>
												<span class="time">20:50 AM</span>
											</time>
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<!--this is for the forecast/privacy-->
											<img alt="Sunny Day" src="imgs/forecast/sunny.png" />
											<div class="info">
												<h2 class="title"><a href="event.html">Independence Day</a> </h2> 
												<p class="desc">United States Holiday slakjdlkajdlkasjdlkajd lkajd lka jlkd jalkdjalkdj alkd jalkd jsalkd jsalkda jsdlksa </p>
											</div>
										</li>
									</ul>
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>

	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/notifications.js"></script> 
<script src="js/profiletab.js"></script>